import React, { useEffect, useState } from 'react'
import Button from '@material-ui/core/Button';
import SQGridList from '@/components/SQGridList'
import './sq.less'
import { GetSelectQsApi } from '@/Api'
import { useHistory } from 'react-router';
import GoBack from '@/components/GoBack'
const cateEnum = {
    'all': '全部',
    'qa': '问答',
    'fill': "填空",
    'one': '单选',
    'check': '判断',
    'code': '编程',
    'many': '多选'
}
// 试题分类
const testType = [
    { key: 'all', zh: '全部', value: '' },
    { key: 'err', zh: '错误', value: '' },
    { key: 'done', zh: '已做', value: '' },
    { key: 'notdone', zh: '未做', value: '' }
]
export default function SelectQs(props) {
    // console.log(props.match.params.actionCode);
    const history = useHistory()

    //题目分类数组
    const [questionTypeList, setQuestionTypeList] = useState([])
    //  修改一个要获取题目的类型
    const [questionType, setQuestionType] = useState('all')
    //  修改一个要获取题目的类型 第二个列表
    const [stType, setStType] = useState('all')
    // 做题数据
    const stNumber = [
        { key: '5', zh: '5', value: '' },
        { key: '10', zh: '10', value: '' },
        { key: '20', zh: '20', value: '' },
        { key: '30', zh: '30', value: '' }
    ]
    const [testNum, setTestNum] = useState(5)
    useEffect(() => {
        GetSelectQsApi({
            actionCode: props.match.params.actionCode,
            testType: 'all'
        }).then(res => {
            const { data } = res
            data.forEach(e => {
                e.zh = cateEnum[e.key]
            });
            setQuestionTypeList(data)
        }).catch(
            err => {
                console.log(err);
            }
        )
    }, [props.match.params.actionCode])// eslint-disable-line react-hooks/exhaustive-deps

    const gotoPractice = () => {
        const state = {
            testType: stType,
            questionType,
            testNum,
            actionCode: props.match.params.actionCode
        }
        // console.log(state);
        localStorage.setItem('prstate', JSON.stringify(state))

        history.push('/practice')
        // history.push({
        //     pathname: '/practice',
        //     state: {
        //         testType: stType,
        //         questionType,
        //         testNum,
        //         actionCode: props.match.params.actionCode
        //     }
        // })
    }

    return (
        <div className="sq">
            <div className="top-btns">
                <Button variant="contained" color="primary" onClick={gotoPractice}>
                    进入练习模式
                </Button>
                <Button variant="contained" color="primary" >
                    进入考试模式
                </Button>
            </div>

            {/* 试题分类 */}
            {/* <div>选中的试题分类：{stType}</div> */}
            <SQGridList data={testType} title="试题分类" onItemChange={(key) => setStType(key)}></SQGridList>
            {/* 题目分类 */}
            {/* <div>选中的试题分类：{questionTypeList}</div> */}
            <SQGridList data={questionTypeList} title="考题分类" onItemChange={(key) => setQuestionType(key)} ></SQGridList>
            {/* <div>选中的做题数量：{stNumber}</div> */}
            <SQGridList data={stNumber} title="做题数量" onItemChange={(key) => setTestNum(key)}></SQGridList>
            <GoBack></GoBack>
        </div >
    )
}
